<template>
  <div class="problem-detail">
    <!-- 左侧内容区 -->
    <div class="content-area">
      <!-- 题目标题和基本信息 -->
      <div class="problem-header">
        <h1 class="title">{{ detail.subjectName }}</h1>
        <div class="meta-info">
          <a-tag color="blue">{{ detail.subjectTypeName }}</a-tag>
          <a-tag :color="getLevelColor(detail.subjectLevel)">{{ detail.subjectLevelName }}</a-tag>
          <span class="category">
            <a-icon type="folder" />
            {{ detail.categoryName }}
          </span>
          <span class="collect">
            <a-icon type="star" />
            收藏数：{{ detail.collectCount }}
          </span>
        </div>
      </div>

      <!-- 题目内容区 -->
      <div class="problem-content">
        <!-- 选择题选项 -->
        <template v-if="detail.subjectType === '2'">
          <h3>选项：</h3>
          <div class="options">
            <div v-for="option in detail.subjectOptions" :key="option.option" class="option-item">
              <span class="option-label">{{ option.option }}.</span>
              <span class="option-content">{{ option.answer }}</span>
            </div>
          </div>
        </template>

        <!-- 答案区域 -->
        <div class="answer-section">
          <h3>答案：</h3>
          <div class="answer-content">
            <!-- 选择题答案 -->
            <template v-if="detail.subjectType === '2'">
              <div class="answer-options">
                <div class="correct-options">
                  <span class="option-label">正确选项：</span>
                  <div class="option-tags">
                    <span 
                      v-for="ans in detail.subjectOptionAnswer" 
                      :key="ans.option"
                      class="option-tag"
                    >
                      {{ ans.option }}
                    </span>
                  </div>
                </div>
                <div class="option-list">
                  <div 
                    v-for="option in detail.subjectOptions" 
                    :key="option.option"
                    class="option-item"
                    :class="{
                      'correct': detail.subjectOptionAnswer.some(ans => ans.option === option.option)
                    }"
                  >
                    <span class="option-marker">{{ option.option }}.</span>
                    <span class="option-content">{{ option.answer }}</span>
                  </div>
                </div>
              </div>
            </template>
            <!-- 简答题答案 -->
            <template v-else>
              <div class="text-answer">{{ detail.subjectAnswer }}</div>
            </template>
          </div>
        </div>

        <!-- 解析区域 -->
        <div class="parse-section">
          <h3>题目解析：</h3>
          <div class="parse-content markdown-body" v-html="parsedContent"></div>
        </div>
      </div>
    </div>

    <!-- 右侧操作区 -->
    <div class="action-area">
      <a-button 
        type="primary" 
        class="collect-btn"
        :class="{ active: detail.isCollect === '0' }"
        @click="handleCollect"
      >
        <a-icon :type="detail.isCollect === '0' ? 'star' : 'star-o'" />
        {{ detail.isCollect === '0' ? '已收藏' : '收藏' }}
      </a-button>
      <a-button @click="$router.push('/problems')">返回列表</a-button>
    </div>

    <!-- 底部导航区 -->
    <div class="navigation-area">
      <a-button 
        class="nav-btn prev-btn"
        :disabled="!navigation.prevId"
        @click="navigateToSubject(navigation.prevId)"
      >
        <a-icon type="left" />
        上一题
      </a-button>
      <a-button 
        class="nav-btn next-btn"
        :disabled="!navigation.nextId"
        :loading="nextLoading"
        @click="handleNextNavigation"
      >
        下一题
        <a-icon type="right" />
      </a-button>
      <a-modal
        v-model="showNoMoreModal"
        title="提示"
        :footer="null"
      >
        <p>没有更多题目了</p>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { subject } from '@/api/subject'
import { marked } from 'marked'
import { mapState, mapGetters } from 'vuex'
import { request } from '@/utils/request'
import { decryptId, encryptId } from '@/utils/idEncryption'

// 配置 marked 选项
marked.setOptions({
  gfm: true, // GitHub 风格 Markdown
  breaks: true, // 允许换行符
  highlight: function (code) {
    // 这里可以添加代码高亮的处理
    return code
  }
})

export default {
  name: 'ProblemDetail',
  data() {
    return {
      detail: {},
      loading: false,
      nextLoading: false,
      showNoMoreModal: false
    }
  },
  computed: {
    parsedContent() {
      return this.detail.subjectParse ? marked(this.detail.subjectParse) : ''
    },
    ...mapGetters('problems', ['getNavigation']),
    navigation() {
      // 解密路由参数中的ID
      const originalId = decryptId(this.$route.params.id)
      return this.getNavigation(originalId)
    },
    originalId() {
      return decryptId(this.$route.params.id)
    }
  },
  created() {
    this.fetchProblemDetail()
  },
  methods: {
    async fetchProblemDetail() {
      this.loading = true
      try {
        // 使用解密后的原始ID请求数据
        const res = await subject.getDetail(this.originalId)
        this.detail = res.content
      } catch (error) {
        this.$message.error('获取题目详情失败')
      } finally {
        this.loading = false
      }
    },
    getLevelColor(level) {
      const colors = {
        '0': 'green',
        '1': 'cyan',
        '2': 'blue',
        '3': 'purple',
        '4': 'red'
      }
      return colors[level] || 'blue'
    },
    async handleCollect() {
      try {
        // 使用解密后的原始ID
        await subject.collect(this.originalId)
        this.$message.success('操作成功')
        this.fetchProblemDetail()
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    async handleNextNavigation() {
      if (!this.navigation.nextId && this.navigation.isLastItem) {
        if (this.$store.state.problems.hasMore) {
          this.nextLoading = true
          try {
            await this.$store.dispatch('problems/loadMoreIds')
            if (this.getNavigation(this.originalId).nextId) {
              this.navigateToSubject(this.getNavigation(this.originalId).nextId)
            } else {
              this.showNoMoreModal = true
            }
          } finally {
            this.nextLoading = false
          }
        } else {
          this.showNoMoreModal = true
        }
      } else {
        this.nextLoading = true
        try {
          await this.navigateToSubject(this.navigation.nextId)
        } finally {
          this.nextLoading = false
        }
      }
    },
    async navigateToSubject(id) {
      // 加密ID用于URL
      const encryptedId = encryptId(id)
      await this.$router.push(`/problems/${encryptedId}`)
    }
  },
  watch: {
    '$route.params.id': {
      handler() {
        this.fetchProblemDetail()
      }
    }
  }
}
</script>

<style scoped>
.problem-detail {
  display: flex;
  gap: 24px;
  padding: 24px;
  padding-bottom: 80px;
  max-width: 1300px;
  margin: 0 auto;
}

.content-area {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  padding: 24px;
}

.problem-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.title {
  font-size: 24px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 16px;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #8c8c8c;
  font-size: 14px;
}

.category, .collect {
  display: flex;
  align-items: center;
  gap: 4px;
}

.problem-content {
  color: #262626;
}

h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 24px 0 16px;
  color: #262626;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-item {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.option-label {
  color: #1890ff;
  font-weight: 500;
}

.answer-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.answer-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.correct-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-label {
  font-size: 14px;
  color: #666;
}

.option-tags {
  display: flex;
  gap: 8px;
}

.option-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: #52c41a;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 4px;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding: 16px;
  background: #fafafa;
  border-radius: 4px;
}

.option-item {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 4px;
  transition: all 0.3s;
}

.option-item.correct {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.option-marker {
  font-weight: 500;
  color: #1890ff;
}

.option-content {
  color: #262626;
  line-height: 1.6;
}

.text-answer {
  font-size: 14px;
  line-height: 1.6;
  color: #262626;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 4px;
}

.parse-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.parse-content {
  font-size: 14px;
  line-height: 1.6;
}

/* Markdown 样式 */
.markdown-body {
  color: #24292e;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
}

.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}

.markdown-body blockquote {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
  margin: 0 0 16px 0;
}

.action-area {
  width: 240px;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.collect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.collect-btn.active {
  background: #faad14;
  border-color: #faad14;
}

.navigation-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  z-index: 100;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 40px;
}

.prev-btn {
  margin-right: auto;
}

.next-btn {
  margin-left: auto;
}

/* 禁用状态的按钮样式 */
.nav-btn[disabled] {
  cursor: not-allowed;
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  border-color: #d9d9d9;
}
</style> 